【答题】在线答卷 |
您所在的位置：网站首页 › 微信答题 随机题库自动答题 › 【答题】在线答卷 |
【答题】在线答卷
|
用死记硬背的方法学习的学生，面对桌上堆积成厚厚的书本，是否感觉鸭梨山大呢，想着教育却面临着学习成本不小问题，是否感觉各种不便呢，如果对编程代码有感兴趣，不妨试试做一个自己的在线答题系统，这里可以用微信小程序项目来实现哦。 制作思路，将书上讲得各种的重点，摘录下并写到一个文档中，然后经过构建脚本处理，生成一个题库，放到一个托管题库文件的站点中，用小程序去请求后台获取题库， 打开微信开发工具，选择小程序，创建一个项目， 例如项目名称为miniprogram-answer，然后选择以下，再确定创建 AppID 使用自己的测试号不使用云服务JavaScript - 基础模板 创建三个页面在小程序首页上，创建三个页面，通过底部的选项卡来管理， 在项目下有个app.json文件，可以修改配置，在这里添加页面底部的选项卡，如下代码 "tabBar": { "list": [ { "text": "科目", "pagePath": "pages/tab1/tab1", "iconPath": "static/icon_floder.png", "selectedIconPath": "static/icon_floder.png" }, { "text": "答卷", "pagePath": "pages/tab2/tab2", "iconPath": "static/icon_floder.png", "selectedIconPath": "static/icon_floder.png" }, { "text": "我的", "pagePath": "pages/tab3/tab3", "iconPath": "static/icon_floder.png", "selectedIconPath": "static/icon_floder.png" } ] }修改后点击保存，开发工具会自动创建好底部选项卡对应的三个页面文件 第一个页面看看第一个页面，文件位置在pages/tab1/tab1， 这个页面用于展示各种科目，和最近更新的信息， 在页面布局文件中tab1.wxml，添加布局，显示如下 页面用上面的三个自定义组件即可完成布局，它们分别是 carousel 轮播图grid-menu 格子菜单group-list 分组列表 第二个页面看看第二个页面，文件位置在pages/tab2/tab2， 这个页面用于展示用户的最近，或选择打开查看过的题目， 在页面布局文件中tab2.wxml，添加布局，显示如下 列表项是一个文件夹，点击展开，可显示里面的文件列表， 这个页面只用了group-list分组列表组件，类似手风琴组件的效果 第三个页面看看第三个页面，文件位置在pages/tab3/tab3， 用于展示自己的，答题及格的结果，和总成绩， 在页面布局文件中tab3.wxml，添加布局，显示如下 这个页面用的是一个user-card为用户名片组件，还有一个group-list分组列表组件展示成绩 分包加载其它如内页，多分支页面，以及多页面，都可以放到分包中， 可按需加载，减少小程序加载时间， 接下来，创建一个分包，需要在配置文件app.json添加一个分包信息，代码如下 "subPackages": [ { "root": "package1", "pages": [ "pages/index/index", "pages/answer/answer" ] } ]点击保存后，开发工具会在项目下自动创建一个分包文件夹package1 选题列表页面在分包文件夹中，创建一个选题列表页面，文件在package1/pages/index/index， 当用户点击其中一个科目后，例如点击电子科目，进入的页面就是选题列表页面，如下图 页面用到了一个搜索框，还有一个自定义组件group-list展示列表， 答题页面在分包文件夹中，再创建一个答题页面，文件在package1/pages/answer/answer， 当用户选择一个题目后，例如点击计算机基础知识题，进入的页面就是答题页面，如下图 页面布局是用了表单组件：form,radio,checkbox,button多个输入组件组合的，并不复杂， 答题页面可以有 单选题，多选题，填空题， 在标题栏更新倒计时 后台数据上面的页面都讲完了，有自信可以做出一个一样的来，但是，页面的数据都是从哪里来的呢 请求数据当然是从远程服务器获取的，可以想象它是用浏览器访问网络信息，需要先知道它的访问地址， 在文件app.js中添加请求的数据方法，代码如下 /** * 请求数据方法 */ request(options) { const req = (complete) => { wx.request({ complete, url: `https://gitcode.net/zs1028/resource_mp_answer/-/raw/master/${options.filename}?inline=false`, fail: options.fail, success(res) { switch(res.statusCode){ case 200: options.success(res.data); break; case 404: default: options.fail({ errMsg:'资源未找到' }) } } }) }; if (options.showLoading) { wx.showLoading({ title: options.showLoading instanceof String ? options.showLoading : '请求中', success:() => req(() => wx.hideLoading()) }) }else req() },请求方法request()和微信小程序的API wx.request()用法是一致的， 只是有一点不同，url应换成filename资源文件名(包括路径)， 如果想改用自己的题库，把其中链接替换成自己管理的gitcode项目地址即可 继续在文件app.js中添加点击方法navigateToAnswerPage()，用于打开答题页面，代码如下 navigateToAnswerPage(item) { wx.navigateTo({ url: `/package1/pages/answer/answer?name=${item.key}&value=${item.value}`, }) }上面所讲得两个方法写好了，在其它的页面上就可以调用这个方法，加载数据和打开答题页面 管理后台后台数据都放在这里的，点此 resource_mp_answer 查看，可以看到数据都是json文件， 数据放在托管的网站Gitcode中，可方便之后的管理和维护，无须花费租个服务器，降低了成本， 由于数据默认是公开的，放在托管的网站中任何人都能访问和复制， 所以，私有的数据（项目）是不能公开访问和使用的，设置简单， 温馨提示 托管网站是用于托管代码的，不知道后期会不会限制托管资源（可能认为是漏洞），暂时目前它是仍可使用的 关于项目就写到这里，看到这里，读者对答题的实现思路是否清晰了呢， 有小程序开发基础的话，自己可以尝试实现一个吧， 关于题库资源的整理， 在读学生有可能很需要实现用这个辅助学习，边学边更新学习资料，就当记学习笔记一样使用，考前复习； 这对在校教师也很有帮助吧，毕竟个人的力量有限，教师可以组织让多个学生一起参与共建一个题库资源，共享题库资源，提高学习效率，对考试有信心。 来看下答题小程序项目的运行效果，动图如下， 关于项目源码，已放在资源类别下，需要找一找，点此查找 答题-小程序-项目源码，(在手机上访问可能找不到，请用电脑浏览器查看)，请放心下载，感谢支持。
|
在一个页面配置tab1.json文件中，可以看到，配置如下
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |